@import "~bourbon/app/assets/stylesheets/bourbon";
@import "~bourbon-neat/app/assets/stylesheets/neat";
@import "~keen-ui/dist/keen-ui.css";
@import "common/font";
@import "common/variables";
@import "plugin/github-markdown";
@import "plugin/codemirror";
@import "plugin/prismjs";

html {
    font-size: 100%;

    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: $font-family-sansSerif;
    font-weight: $font-weight-base;
    line-height: $line-height-base;
    scroll-behavior: smooth;
}

.container {
    @include outer-container(100%);
}

// toolbar
.toolbar-container {
    @include span-columns(12);
    height: $toolbar-height;
    user-select: none;
}
.ui-switch {
    cursor: pointer;
}

// editor
.input,
.preview {
    @include span-columns(6);
    height: calc(100vh - #{$toolbar-height} - #{$statusbar-height});
}
.CodeMirror {
    height: 100%;
    width: 100%;
}

.input {
    //transition: width .3s;
    .open & {
        width: 100%;
    }
}
.preview {
    overflow: auto;
    padding: 0 1rem;
}

// footer
.statusbar-container {
    @include span-columns(12);
    height: $statusbar-height;
    color: $color500;
    font-size: $font-size-xs;
    line-height: 1rem;
    border-top: 1px solid rgba(0,0,0,0.12);
    padding: 0 .5rem;

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      > li {
        display: inline-block;
        font-size: inherit;
        padding-right: 8px;
        padding-left: 8px;
      }
    }
    .label {
      color: $color600;
    }
}

.statusbar-left,
.statusbar-right {
  @include span-columns(6);
  @include ellipsis(100%);
}

.statusbar-left {
  text-align: left;
}
.statusbar-right {
  text-align: right;
}

// drop
.dropzone {
  opacity: 0;
  position: fixed;
  width: calc(100%);
  height: 100vh;
  right: 0;
  top: 0;
  z-index: -100;
  background: $faint-black;
  border: 4px dashed $color400;

  transition: opacity .4s;
  user-select: none;
}
